<template>
    <div class="popup" :class="[show?'active':'',hideClass]">
        <b-shadow :show="show"></b-shadow>
        <article class="popup_body" :style="{
                        transform:`scale(${scale})`
                    }" @transitionend="end">
            <slot></slot>
        </article>
    </div>
</template>
<script>
import xShadow from './shadow.vue';
export default {
    data() {
        return {
            scale: 0,
            hideClass: 'hide'
        }
    },
    props: {
        show: {
            default: false
        }
    },
    mounted() {
        if (this.show) {
            this.open()
        }
    },
    methods: {
        end() {
            if (this.show == false) {
                this.hideClass = 'hide';
            }
        },
        open() {
            this.hideClass = ''
            setTimeout(() => {
                this.scale = 1;
            }, 100)
        },
        close() {
            setTimeout(() => {
                this.scale = 0;
            }, 100)
        }
    },
    components: {
        xShadow
    },
    watch: {
        show(newVal) {
            this.hideClass = ''
            if (newVal) {
                this.open()
            } else {
                this.close()
            }
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../asset/scss/mixin/export.scss';
.popup {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    @include flex;
    @include justify(center, center);
    @include align(center, center);
    z-index: -1;
    .popup_body {
        -webkit-transition: transform .3s linear;
        transition: transform .3s ease-in-out;
    }
    &.active {
        z-index: 2;
        .popup_body {
            z-index: 3;
        }
    }
    &.hide {
        display: none;
    }
}
</style>